<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="${path}/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <title>订单确认</title>


    <style>
        #zly{
            width: 50px;
            height: 50px;

            /* 设置边框为圆形 */
            border-radius: 50%;
        }
        #lunbo{
            margin-top: -20px;
        }
        #font-color{
            color: white;
            background-color:rgb(34, 33, 33);

        }   
        #log-ss{
            top:0px;
            width: 0%;
        }
        #BS a:hover{
                color: red;
        }
        .navbar {
            position: relative;
            min-height: 50px;
            margin-bottom:0px; 
            border: 1px solid transparent;
        }
        .carts {
            padding-top: 20px;
        }
        .carts .title h3 {
            font-weight: 700;
            color: #000000;
        }
        .carts .title h3 {
            float: left;
        }
        .carts .title span {
            float: right;
            font-size: 12px;
        }
        .carts .title strong {
            margin-right: 10px;
        }
        .cart-box strong,
        .carts .title strong {
            color: #cd0606;
            font-size: 14px;
            font-weight: normal;
        }
        .carts .title a {
            display: inline-block;
            padding: 3px 10px;
            color: #ffffff;
            background-color: #cd0606;
        }
        .cart-box {
            margin-top: 20px;
            margin-bottom: 20px;
            text-align: center;
            border: 1px solid #cccccc;
            font-size: 12px;
        }
        .cart-box img {
            width: 80px;
            margin: 0 20px;
        }
        .cart-box td:first-child {
            text-align: left;
            padding-left: 20px;
        }
        .cart-box tr:not(.no-h) {
            height: 100px;
        }
        .cart-box tr:last-child {
            border: none;
        }
        .cart-box .len-lg {
            width: 500px;
        }
        .cart-box .len-sm {
            width: 128px;
        }
        .cart-box input[type='number'] {
            width: 100px;
            height: 30px;
            padding: 3px 5px;
            background-color: #fff;
            border: 1px solid #cccccc;
            text-align: center;
        }
        .cart-box tr {
            border-bottom: 1px solid #cccccc;
        }
        .cart-box tr:first-child {
            line-height: 40px;
        }

        .close-bg {
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            display: inline-block;
            border-radius: 100%;
            background-color: #cccccc;
            color: #ffffff;
        }
        .cart-box .discount {
            margin-top: 3px;
        }
        .close-bg:hover,
        .cart-box .discount span {
            color: #ffffff;
            background-color: #ff9518;
        }
        .close-bg:hover,
        .carts .title a,

        .chose-pro {
            margin: 0 0 30px;
        }
        .chose-pro input[type='checkbox'] {
            display: inline-block;
            margin-right: 10px;
        }
        .chose-pro p {
            margin-right: 30px;
            margin-left: 20px;
        }
        .carts-b strong {
            font-size: 40px;
            font-weight: 700;
            color: #cd0606;
        }
        .carts-b a {
            width: 160px;
            height: 35px;
            display: inline-block;
            line-height: 35px;
            text-align: center;
            color: #ffffff;
            font-size: 16px;
        }
        .buy_box {
            margin-top: 20px;
            margin-bottom: 20px;
            background-color: #fafafa;
            padding: 15px;
        }
    </style>

</head>
<body>
        <!-- 导航begin -->
        <%@ include file="../common/nav.jsp" %>
        <!-- 导航end -->
        
        <section class="carts">
            <div class="container">
                <div class="title clearfix">
                    <h3>我的购物车</h3>
                    <span>已选商品(不含运费)：<strong>￥1699.00</strong> <a href="javascript: void (0)">结算</a></span>
                </div>
                <div class="cart-box clearfix">
                    <table class="col-xs-12 clearfix">
                        <tr class="no-h">
                            <td class="len-lg">选择</td>
                            <td class="len-sm no-see">单价(元)</td>
                            <td class="len-sm">数量</td>
                            <td class="len-sm">金额(元)</td>
                            <td class="len-sm">操作</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox">
                                <img src="imgs/Redmi K30.jpg" alt="">
                                <span class="img_title">Redmi K30</a></span>
                            </td>
                            <td class="no-see">
                                <p>1699.00</p>
                            </td>
                            <td>
                                <input type="number" value="1">
                            </td>
                            <td>
                                <p><strong>1699.00</strong></p>
                            </td>
                            <td>
                                <a class="close-bg" href="#">&times;</a>
                            </td>
                        </tr>

                    </table>
<<<<<<< HEAD
                <hr>
                    <div class="container-fluid">
                        <div class="table-responsive">
                            <table class="table table-hover" id="cart_table">
                                <caption></caption>
                                <thead>
                                    <tr>
                                        <td class="len-lg">选择</td>
                                        <td class="len-sm">名称</td>
                                        <td class="len-sm no-see">单价(元)</td>
                                        <td class="len-sm">金额(元)</td>
                                        <td class="len-sm">数量</td>
                                        <td class="len-sm">操作</td>
                                    </tr>
                                </thead>
                                <tbody>

                                <c:forEach items="${carts}" var="c" varStatus="vs">
                                    <tr>
                                        <td><input type="checkbox" name="cks" value="${c.id}"><br>${c.id}</td>
                                        <td><img src="${path}/imgs/${c.imgUrl}" style="width: 80px;height: 80px"></td>
                                        <td>${c.phoneName}</td>
                                        <td>${c.price}</td>
                                        <td>${c.num}</td>
                                        <td>${c.total}</td>
                                        <td>
                                        <p class="text-danger">
                                            <a class="text-danger" href="${path}/del1?id=${c.id}">
                                                <span class="glyphicon glyphicon-trash"></span>
                                            </a>
                                        </p>
                                        </td>
                                    </tr>
                                </c:forEach>

                                </tbody>
                            </table>
                        </div>
                    </div>
=======
>>>>>>> 681163e7601bdb9f0b63d7287a38197b1fcf57c0
                </div>
                <div class="carts-b clearfix">
                    <div class="clearfix">
                        <div class="chose-pro">
                            <p class="leftBar">
                                <input type="checkbox">全选
                            </p>
                        </div>
                        <p class="rightBar" align="right">
                            商品总价(不含运费)：
                            <strong>￥1699.00</strong>
                        </p>
                    </div>
                    <p align="right"><button type="submit" class="btn btn-danger">&nbsp结算&nbsp</button></p>
                </div>
            </div>
        </section>


        <%@ include file="../common/footer.jsp" %>
        <script src="plugins/jquery/jquery.min.js"></script>
        <script src="plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
 
        <script>
<<<<<<< HEAD

            //批量删除
            function delMore(){
                //1. 获取所有的checkbox - 根据checkbox的name属性的值
                //返回得到的是一个数组
                var cks = document.getElementsByName("cks");

                //3 - 编程的起点 - 从变量开始
                //定义一个计数器
                var count = 0;

                //2.循环遍历这个数组
                for(var i=0;i<cks.length;i++){
                    //如果有一个checkbox被选中了，那么count++
                    if(cks[i].checked){
                        count++;
                    }
                }

                //如果count==0，就代表没有一个被选中了...
                if(count==0){
                    alert("sorry,please click delete one");
                    return;
                }

                //确认框
                var flag = confirm("确定删除吗？");

                if(flag){
                    //确定删除...
                    //定义一个变量 - 用来拼接选中的id
                    var ids = "";
                    //遍历所有的cks
                    for(var i=0;i<cks.length;i++){
                        if(cks[i].checked){
                            ids += cks[i].value+":";
                        }
                    }
                    //js发送数据到后台
                    window.location="${path}/delMore1?ids="+ids.substring(0,ids.length-1);

                }
            }

=======
>>>>>>> 681163e7601bdb9f0b63d7287a38197b1fcf57c0
            $('#myCarousel').carousel({
                interval: 2000
            })
        </script>


</body>
</html>